<template>
    <div class="codeCheck">
      <alertTip v-if="showAlert" @closeTip="showAlert = false" :alertText="alertText"></alertTip>
      <!--<headers title="获取验证码"></headers>-->

      <div class="content">
        <span class="span1">填写验证码，直接登录</span>
        <div class="codePhone">
          <p>验证码已发送至&nbsp;&nbsp;&nbsp;{{this.isphone}}</p>
        </div>

        <span class="span2">验证码</span>
        <div class="code">
          <input type="text" v-model="code" placeholder="请输入验证码">
          <button v-if="testbut" @click='sendCode()'>重新发送</button>
          <button v-else v-cloak>{{countdown}}s后重发</button>
        </div>
        <span>设置密码</span>
        <div class="pwdSet">
          <input type="password" v-model="pass" placeholder="6-16位密码，包含字母、数字">
        </div>

        <button @click='sure' :disabled='dis'><img src="../assets/images/login/next.jpg" alt=""></button>
      </div>
        <!--<router-view/>-->
    </div>
</template>

<script>
  /* eslint-disable quotes,semi,handle-callback-err */
  import wx from 'weixin-js-sdk'
  import { wxHttpTool,wx_config, http_getParam, get_shopQrcoe,wx_share,wx_hideAllMenu } from '../components/httpUtil/httpUtil'
  import {msg_10046} from '../message/msg_10046'
  export default {
    name: 'codeCheck',
    data () {
      return {
        title: '登录',
//        isphone: '',
        code: '',
        pass: '',
        testbut: '', // 验证码倒计时
        countdown: 60,
        dis: true,
        showAlert:false,
        alertText:null
      }
    },
    methods: {
      sendCode () {
        console.log(this.isphone);
        this.code = '';
        this.pass = '';
        // 验证码倒计时
        this.testbut = false;
//        const countdown = 60;
        let timer = setInterval(() => {
          this.countdown --;
          if (this.countdown === 0) {
            this.testbut = true;
            clearInterval(timer);
          }
        }, 1000)
        const jsonValue = JSON.stringify({
          'c': '10003',
          'p': {
            'mobile': this.isphone  // 帐号
          }
        });
        this.$http.post(api+ '/qqs.us', jsonValue).then((res) => {
          console.log(res.data);
          //          this.$emit('has-log', res.data.username);
        }, (res) => {
          this.showAlert = true;
          this.alertText = '网络错误'
        })
      },
      sure () {
        const regPwd = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/;
        const jsonValue = JSON.stringify({
          'c': '10001',
          'p': {
            'name': this.isphone, // 用户名
            'pw': this.pass, // 密码
            'platId': this.isphone, // 第三方平台ID
            'mobileCode': this.code  // 手机验证码
          }
        });
        this.$http.post(api+ '/qqs.us', jsonValue).then((res) => {
          console.log(res);
          this.pass = '';
          const data = res.data;
          if (data.p.isTrue === true) {
            if (!regPwd.test(this.pass)) {
              this.showAlert = true;
              this.alertText = '密码格式不正确'
              // alert('密码格式不正确')
              this.pass = ''
            } else {
//              localStorage.removeItem("phone"); // 退出登录时清除localStorage中的数据
              this.$router.push('/');
            }
          } else {
            this.showAlert = true;
            this.alertText = data.p.errorMsg
            // alert(data.p.errorMsg);
            this.pass = '';
          }
        }, (res) => {
          this.pass = '';
          this.showAlert = true;
          this.alertText = '网络错误'
          // alert('网络错误');
        })
      }
    },
    watch: {
      pass (val) {
        if (val !== '' && this.code) {
          this.dis = false;
        } else {
          this.dis = true;
        }
      }
    },
    // 跳转页面成功后，执行一些事件……
    created () {
      wxHttpTool.wxAuthor(this, function (varRet, varJson, varThis = this) {
        if (varRet == -1) {
          varThis.alertTip('网络错误');
          varThis.go = function () {
            varThis.showAlert = false;
          }

        }
        // 关注钱应该判断下是否已经关注过了
        msg_10046.send(varThis,msg_10046.entity(),function(varThis,res){
          varThis.wxlist=res.data.p.sign
          wx_config(varThis.wxlist);
          wx_hideAllMenu();
          wx.hideMenuItems({
            //禁用单独分享朋友圈QQ空间等功能
            menuList: ["menuItem:share:timeline","menuItem:share:QZone","menuItem:share:qq"] // 要隐藏的菜单项，所有menu项见附录3
          });
        })


      },this.type)
      this.testbut = false;
      let timer = setInterval(() => {
        this.countdown --;
        if (this.countdown === 0) {
          this.testbut = true;
          clearInterval(timer);
        }
      }, 1000)
      // 获取到注册页面的手机号
//      this.isphone = this.$route.params.phone;
      // 获取到注册页面的js中localStorage中的数据
      this.isphone = JSON.parse(localStorage.getItem('phone'));
//      change();
    }
  }
</script>

<style scoped>
  .codeCheck{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    /*padding: 80px 0 0;*/
    box-sizing: border-box;
  }
  .content{
    display: flex;
    flex-direction: column;
    align-items: center;
    /*font-size: 16px;*/
    margin-top: 20%;
  }
  .content input{
    border: none;
    outline: none;
    font-size: 30px;
    text-align: center;
    margin-top: 20px;
    width: 390px;
    /*margin-left: 6rem;*/
  }
  .code input{
    width: 185px;
    margin-left: 100px;
  }
  .code button{
    width: 107px;
    float: right;
    margin-top: 20px;
  }
  .content button{
    border: none;
    outline: none;
    background: #fff;
    color: #f00;
    font-size: 20px;
  }
  .content button img{
    width: 470px;
    height: 75px;
  }
  .code,.pwdSet{
    margin: 25px 0;
    border-bottom: 1px solid #ccc;
    padding-bottom: 25px;
    width: 513px;
    text-align: center;
  }
  .pwdSet{
    margin-bottom: 60px;
  }
  span{
    font-size: 25px;
  }
  .span1{
    font-size: 20px;
  }
  .span2{
    margin-top: 60px;
  }
  .codePhone{
    font-size: 25px;
    margin-top: 30px;
    height: 30px;
  }
</style>
